import { useState } from "react"
import { Button, Uploader, Form, Notify } from 'react-vant'
import { useNavigate } from 'react-router-dom';
import axios from 'axios'
import "../../css/Niux/hu.css"
import { log } from 'three/webgpu';
axios.defaults.baseURL = 'http://localhost:3000/Niux'

const Submit = () => {
  let [accessToken, setaccessToken] = useState(JSON.parse(localStorage.getItem('accessToken')) || "")
  
  
  
  const [form] = Form.useForm()
  let navigate = useNavigate();
  const onFinish = async (values) => {
    console.log(accessToken);
    let imgSrc = values.uploader[0]
    await axios.post('/upload', imgSrc, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': accessToken
      }
    }).then(res => {
      let { data } = res
      console.log(111);
      if (data.code == 200) {
        Notify.show({ type: 'success', message: '通知内容' })
        console.log("成功");
      }
    })
      .catch(err => {
        console.log(err);
      })
  }

  return (
    <>
      <div id="submitDiv">
        <Form
          colon
          form={form}
          onFinish={onFinish}
          footer={
            <div style={{ margin: '16px 16px 0' }}>
              <Button round nativeType='submit' type='primary' block>
                提交
              </Button>
            </div>
          }
        >
          <Form.Item
            name='uploader'
            label='上传文件'
            rules={[{ required: true, message: '请选择文件' }]}
          >
            <Uploader />
          </Form.Item>
        </Form>
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType='submit' type='primary' block onClick={() => navigate("/sand")}>
            前往3D绘制
          </Button>
        </div>
      </div>
    </>
  )
}

export default Submit